<template>
    <el-dialog title="密码生成" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
      <div class="password-dialog">

        <el-row>
          <el-col :span="5">
            <el-select class="password-length" v-model="len" placeholder="长度" @change="generatePassword">
              <el-option
                v-for="l in lengths"
                :key="l"
                :label="l"
                :value="l"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="19">
            <el-input class="password-container" v-model="password"></el-input>
          </el-col>
        </el-row>

        <div style="margin: 1.25em 0px;">
            <el-checkbox v-model="includeLowerCase" @change="generatePassword">小写字母</el-checkbox>
            <el-checkbox v-model="includeUpperCase" @change="generatePassword">大写字母</el-checkbox>
            <el-checkbox v-model="includeNumbers" @change="generatePassword">数字</el-checkbox>
            <el-checkbox v-model="includePrintableChars" @change="generatePassword">字符</el-checkbox>
        </div>

        <el-button type="primary" @click="generatePassword">生成</el-button>
        <el-button type="primary" @click="copyPassword">复制</el-button>
        <el-button type="primary" @click="usePassword">使用</el-button>
      </div>
    </el-dialog>
  </template>
  
  <script>
  import { ElMessage } from 'element-plus'
  
  export default {
    components: {
    },
    data() {
      return {
        visible: true,
        password: '',
        len: 12,
        lengths: [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
        includeLowerCase: true,
        includeUpperCase: true,
        includeNumbers: true,
        includePrintableChars: true
      };
    },
    created() {
        this.generatePassword()
    },
    methods: {
      usePassword() {
        this.visible = false;
        this.doCopyPassword();
        this.$emit('success',this.password)
				ElMessage.success('密码已设置并复制到剪贴板')
      },
      generatePassword() {
        this.password =  this.generateRandomPassword(this.len)
      },
      generateRandomPassword(length) {
        let cs = [];
        if (this.includeUpperCase) cs.push('ABCDEFGHIJKLMNOPQRSTUVWXYZ');
        if (this.includeLowerCase) cs.push('abcdefghijklmnopqrstuvwxyz');
        if (this.includeNumbers) cs.push('012345678901234567890123456');
        if (this.includePrintableChars) cs.push('!#$%&()*+,-/:;<=>?[]_{|}~');

        const characters = cs.join('');
        if (characters.length === 0) {
            ElMessage.warning('请选择至少一个选项');
            return;
        }

        let password = '';        
        for (let i = 0; i < length; i++) {
          password += characters.charAt(Math.floor(Math.random() * characters.length));
        }
        return password;
      },
      copyPassword() {
        this.doCopyPassword();
        ElMessage.success('密码已复制到剪贴板');
      },
      doCopyPassword() {        
        const el = document.createElement('textarea');
        el.value = this.password;
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
      },
      handleClose() {
        this.visible = false;
      }
    }
  };
  </script>
  
  <style scoped>

  .password-dialog {
    text-align: center;
  }
  
  .password-container {
    font-size: 1.25em;
    
  }

  :deep(.password-container .el-input__inner) {
        text-align: center;
    }

  </style>
  